<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>miniMobile</title>
		<meta name="keywords" content="miniMobile的demo" />
		<meta name="description" content="miniMobile是一个简单易用的移动框架！" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- swiper -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
	</head>

	<body class="fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c o-h">
			<div class="ui-header-l fl w5">
				<b class="icon iconfont icon-sortlight"></b>
			</div>
			<div class="ui-header-c fl f30 w59">
				快速预览
			</div>
			<div class="ui-header-r fl w5">
				<i class="icon iconfont icon-phone"></i>
			</div>
		</header>
		<!-- aside -->
		<aside class="ui-aside w40 bg-color-success f30">
			<div class="user p3 color8 clearfix">
				<div class="fl w10">
					<img src="img/user.jpg" class="w10 h10 radius-o" />
				</div>
				<div class="fr w22">
					<span>狂奔的蜗牛！</span><br />
					<font class="tag f28">12</font>
				</div>
			</div>
			<ul class="f30 mt2">
				<li>
					<a href="index.html" class="pl3 color8">首页</a>
				</li>
				<li>
					<a href="list-button.html" class="pl3 color8">左滑出按钮</a>
				</li>
				<li>
					<a href="list.html" class="pl3 color8">常用列表</a>
				</li>
				<li>
					<a href="comment.html" class="pl3 color8">评论列表</a>
				</li>
				<li>
					<a href="my.html" class="pl3 color8">我的面板</a>
				</li>
			</ul>
		</aside>
		<style>
			/*只针对侧栏内容部分做简单的样式*/
			
			.ui-aside {
				line-height: 1.5em;
			}
			
			.ui-aside ul {
				border-top: 0.02rem solid #017da7;
			}
			
			.ui-aside li {
				line-height: 0.8rem;
				border-bottom: 0.02rem solid #017da7;
			}
			
			.ui-aside a {
				display: block;
			}
		</style>
		<script type="text/javascript">
			var aside = $(".ui-aside").asideUi({
				hasmask: true,
				size: "4rem",
				position: "left",
				sidertime: 300
			});
			$(".ui-header-l").on('touchend', function() {
				aside.toggle();
			})


/*翻译
搜索栏字体样式 
宽度︰ 90%;
高度︰ 40px;
背景颜色︰ 透明;
边境︰ 无;
大纲︰ 0;
字体大小︰ 18px;
字体颜色: #426ab3;
填充︰ 0 20px;
边界半径︰ 50px
}*/

#search_input {
	width: 90%;
	height: 40px;
	background-color: transparent;
	border: none;
	outline: 0;
	font-size: 18px;
	color: #426ab3;
	padding: 0 20px;
	border-radius: 50px
}

/*翻译
搜索框边距 
下边距︰ 30px;
上边距︰ 20px;
*/

.search_part {
	margin-bottom: 30px;
	margin-top: 20px;
}

/*翻译
跨度样式
显示︰ 阻止;
溢出︰ 隐藏;
左填充︰ 5px;
垂直对齐︰ 居中;
*/

span {
	display: block;
	overflow: hidden;
	padding-left: 5px;
	vertical-align: middle;
}

/*翻译
搜索栏框架样式 {
框阴影︰ 0 0 18px rgba(70,70,40,.255);括号里的颜色为Rgb默认，可进入http://rgb.phpddt.com/查询
-webkit 动画︰ fadeIn 2.5;
动画︰ fadeIn 2.5;
背景色︰ rgba(255,255,255,.100);
边界半径︰ 50px;
显示︰ 表;
垂直对齐︰ 居中;
宽度︰ 80%;根据你喜欢的宽度调整，目前我为了对齐图标使用80%
高度︰ 40px;
最大宽度︰ 400px;
边距︰ 10px 默认布局;
}
*/

.search_bar {
	box-shadow: 0 0 18px rgba(70,70,40,.255);
	-webkit-animation: fadeIn 2.5s;
	animation: fadeIn 2.5s;
	background-color: rgba(255,255,255,.100);
	border-radius: 50px;
	display: table;
	vertical-align: middle;
	width: 80%;
	height: 40px;
	max-width: 400px;
	margin: 10px auto;
}

/*翻译
搜索栏搜索目标确认图标样式，目前为米奇
轮廓边框︰ 0;
高度︰ 40px;
浮标位置︰ 右;
颜色: #000;
字体大小︰ 16px;
字体粗细︰ 700;
边境︰ 无;
背景颜色︰ 透明;
填充︰ 0 13px 0 13px
*/

#search_submit {
	outline: 0;
	height: 40px;
	float: right;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	border: none;
	background-color: transparent;
	padding: 0 13px 0 13px
}
</style>
<script type="text/javascript">function search(){if(document.getElementById("search_input").value != ""){window.location.href = "https://www.baidu.com/s?ie=utf-8&from=1011440l&wd=" + document.getElementById("search_input").value;document.getElementById("search_input").value = "";}return false;}</script>

			<!-- Add Arrows -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</section>
		<script>
			var swiper = new Swiper('.swiper-container', {
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: '.swiper-pagination',
				}
			});
		</script>
		<style>
			.swiper-button-next,
			.swiper-button-prev {
				/*swiper 默认图标适应性较差，使用rem单位规定左右按钮大小，图标大小*/
				width: 0.3rem !important;
				height: 0.5rem !important;
				background-size: cover !important;
				margin-top: -0.23rem !important;
			}
		</style>
		<!-- 导航 -->
		<section class="demo-nav t-c f28 clearfix">
			<div class="col-3 h19">
				<a href="button.html" class="pt4 pb4"><i class="f42 color-primary icon iconfont icon-anniu"></i>
					<p>按钮徽章</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="layer.html" class="pt4 pb4">
					<i class="f46 color-success icon iconfont icon-dialog"></i>
					<p>消息提示</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="grid.html" class="pt4 pb4"><i class="f44 color-info icon iconfont icon-biaoge"></i>
					<p>栅格化</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="form.html" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>表单元素</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="icon.html" class="pt4 pb4"><i class="f46 color-danger icon iconfont icon-tupian"></i>
					<p>icon</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="aside.html" class="pt4 pb4"><i class="f46 color-warning icon iconfont icon-menu"></i>
					<p>侧栏导航</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="font.html" class="pt4 pb4"><i class="f50 color-info icon iconfont icon-font"></i>
					<p>字体排版</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="foldingPanel.html" class="pt4 pb4"><i class="f50 color-primary icon iconfont icon-zhediemianban"></i>
					<p>折叠面板</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="swiper.html" class="pt4 pb4"><i class="f50 color-success icon iconfont icon-ic_view_carousel_px"></i>
					<p>swiper</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="flow.html" class="pt4 pb4"><i class="f42 color-warning icon iconfont icon-pubuliu"></i>
					<p>瀑布流</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="iscroll.html" class="pt4 pb4"><i class="f46 color-danger icon iconfont icon-tables-copy"></i>
					<p>iScroll</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="listPic.html" class="pt4 pb4"><i class="f46 color-success icon iconfont icon-anniu"></i>
					<p>相册切换</p>
				</a>
			</div>	
			<div class="col-3 h19">
				<a href="keyboard.html" class="pt4 pb4"><i class="f46 color-primary icon iconfont icon-jianpan"></i>
					<p>安全键盘</p>
				</a>
			</div>	
			<div class="col-3 h19">
				<a href="Progress.html" class="pt4 pb4"><i class="f60 color-danger icon iconfont icon-jindutiao"></i>
					<p>Progress</p>
				</a>
			</div>	
			<div class="col-3 h19">
				<a href="fullWinodwPage.html" class="pt4 pb4"><i class="f50 color-warning icon iconfont icon-icwindowzoom48px"></i>
					<p>全屏切换</p>
				</a>
			</div>	
			<div class="col-3 h19">
				<a href="tab.html" class="pt4 pb4"><i class="f40 color-info icon iconfont icon-tab"></i>
					<p>Tab切换</p>
				</a>
			</div>	
		</section>
		<style>
			.demo-nav {
				line-height: 1.8em;
			}
			
			.demo-nav div {
				border-left: 1px solid #f1f1f1;
				border-bottom: 1px solid #f1f1f1;
			}
			
			.demo-nav a {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.demo-nav div:nth-child(4n+1) {
				border-left: none;
			}
		</style>
		<!-- 底部导航 -->
		<nav class="demo-bottomNav mt6 w75 h12 pt1 t-c f28 bg-color8 o-h clearfix">
			<div class="w15 fl">
				<a href="index.html">
					<i class="f46 icon iconfont icon-home_light"></i>
					<p>首页</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="list-button.html">
					<i class="f46 icon iconfont icon-comment"></i>
					<p>左滑</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="list.html">
					<i class="f46 icon iconfont icon-rank"></i>
					<p>列表</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="comment.html">
					<i class="f46 icon iconfont icon-list"></i>
					<p>评论</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="my.html">
					<i class="f46 icon iconfont icon-servicefill"></i>
					<p>我的</p>
				</a>
			</div>
		</nav>
		<style type="text/css">
			.demo-bottomNav {
				line-height: 1.8em;
				border-top:1px solid #F1F1F1;
			}
			
			.demo-bottomNav a {
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</body>

</html>